<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="角色列表"
      row-key="id"
      :indent="30"
      :columns="columns"
      :request-api="rateList"
      :initParam="where"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="toDetail(0)" v-auth="'create'">{{ $t("common.add") }}</el-button>
      </template>
      <!-- 菜单图标 -->
      <template #rate="scope"> 1 {{ scope.row.unit.name }} * {{ scope.row.value }} = 1 {{ scope.row.rate.name }}</template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="Menu" v-auth="'auth'" @click="authRole(scope.row)">
          {{ $t("system.role.auth") }}
        </el-button>
        <el-button type="primary" link :icon="EditPen" @click="toDetail(scope.row.id)" v-auth="'modify'">
          {{ $t("common.edit") }}
        </el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteRole(scope.row)" v-auth="'delete'">
          {{ $t("common.del") }}
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="menuMange">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import { rateList, rateDel } from "@/api/modules/common";
import { Delete, EditPen, CirclePlus, Menu } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { useI18n } from "vue-i18n";

const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const proTable = ref();

const where = { unit_id: route.params.id };
// 跳转详情页
const toDetail = (id: number) => {
  if (id) return router.push(`/common/rate/modify/${id}`);

  return router.push(`/common/rate/create/${route.params.id}`);
};

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "id", label: "ID", width: 120 },
  { prop: "rate", label: t("common.rate.rate") },
  { prop: "operation", label: t("common.operation"), width: 250, fixed: "right" }
];

// 删除菜单（示例、根据自己后端接口来）
const deleteRole = async (params: Menu.MenuOptions) => {
  await useHandleData(rateDel, { id: params.id }, `删除【${params.title}】换算`);
  proTable.value.getTableList();
};
</script>
